<template>
	<widget-root :styles="styles">
		<div :id="idStr">
			<div class="video" :class="{
                style1: content.proportion == 1,
                style2: content.proportion == 2,
                style3: content.proportion == 3,
            }">
				<div v-if="content.swiper_enabled">
					<swiper class="swiper" @change="swiperChange" :autoplay="swiperAutoplay">
						<swiper-item v-for="(item, index) in content.data" :key="index" :style="[{
					'border-radius': `${$px2rpx(styles.border_radius_top)}rpx ${$px2rpx(styles.border_radius_top)}rpx ${$px2rpx(styles.border_radius_bottom)}rpx ${$px2rpx(styles.border_radius_bottom)}rpx`,
				}, ]">
							<image v-if="item.showPoster" class="poster" :src="$getImageUri(item.poster)"
								mode="aspectFill">
							</image>
							<image v-if="item.showPoster" class="play-icon"
								:src="$getImageUri('resource/image/shopapi/uniapp/icon_play.png')" mode="widthFix"
								@tap="palyBatch(index)" />
							<video :id="item.videoId" class="video-container"
								:src="item.video_type == 1?$getImageUri(item.url):item.url"
								@pause="handlePauseBatch(index)" @play="handlePalyBatch(index)"
								:autoplay="item.autoplay">
							</video>
						</swiper-item>
					</swiper>
					<indicator :current="current" :length="content.data.length" :type="styles.indicator_style"
						:align="styles.indicator_align" :color="styles.indicator_color" />
				</div>
				<div v-else>
					<image v-if="showSinglePoster" class="poster" :src="$getImageUri(content.data[0].poster)"
						mode="aspectFill" :style="[{
					'border-radius': `${$px2rpx(styles.border_radius_top)}rpx ${$px2rpx(styles.border_radius_top)}rpx ${$px2rpx(styles.border_radius_bottom)}rpx ${$px2rpx(styles.border_radius_bottom)}rpx`,
				}, ]"></image>
					<image v-if="showSinglePoster" class="play-icon" mode="widthFix"
						:src="$getImageUri('resource/image/shopapi/uniapp/icon_play.png')" @tap="paly" />
					<video :id="content.data[0].videoId" class="video-container" :src="getVideoUrl" @pause="handlePause"
						@play="handlePaly" :autoplay="content.data[0].autoplay" :style="[{
					'border-radius': `${$px2rpx(styles.border_radius_top)}rpx ${$px2rpx(styles.border_radius_top)}rpx ${$px2rpx(styles.border_radius_bottom)}rpx ${$px2rpx(styles.border_radius_bottom)}rpx`,
				}, ]">
					</video>
				</div>
			</div>
		</div>
	</widget-root>
</template>

<script type="text/javascript">
	import {
		getNonDuplicateID
	} from '@/utils/tools'
	export default {
		props: {
			content: {
				type: [Object, Array]
			},
			styles: {
				type: [Object, Array]
			},
			idStr: {
				type: String
			},
			scrollTop: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				current: 0,
				showSinglePoster: true,
				swiperAutoplay: true
			}
		},
		methods: {
			paly() {
				this.content.data[0].videoContext.play()
				this.swiperAutoplay = false
			},
			stop() {
				this.content.data[0].videoContext.stop()
				this.handlePause();
			},
			handlePause() {
				this.showSinglePoster = true
				this.swiperAutoplay = true
			},
			handlePaly() {
				this.showSinglePoster = false
				this.swiperAutoplay = false
			},
			swiperChange({
				detail
			}) {
				this.current = detail.current;
				this.content.data.forEach((item, idx) => {
					if (!item.showPoster) {
						this.content.data[idx].videoContext.stop()
						this.content.data[idx].showPoster = true
					}
				})
				this.swiperAutoplay = true
			},
			palyBatch(idx2) {
				var cdata = [...this.content.data]
				cdata.forEach((item, idx) => {
					if (idx == idx2) {
						cdata[idx].videoContext.play()
						cdata[idx].showPoster = false
					} else {
						cdata[idx].videoContext.stop()
						cdata[idx].showPoster = true
					}
				})
				this.content.data = [...cdata]
				this.swiperAutoplay = false
			},
			handlePauseBatch(idx) {
				this.content.data[idx].showPoster = true
				this.swiperAutoplay = true
			},
			handlePalyBatch(idx) {
				this.content.data[idx].showPoster = false
				this.swiperAutoplay = false
			},
			dealVideoScrollTop() {
				const system = wx.getSystemInfoSync()
				const menu = wx.getMenuButtonBoundingClientRect();
				const navigateBar = (menu.top - system.statusBarHeight) * 2 + menu.height;
				const windowHeight = system.windowHeight;
				const query = wx.createSelectorQuery().in(this);
				query.select("#" + this.idStr).boundingClientRect().exec((res) => {
					const {
						top,
						bottom,
						height
					} = res[0]
					if (top > windowHeight || top - navigateBar + height > windowHeight || bottom < 0 || bottom >
						0 && bottom < height) {
						this.$nextTick(() => {
							this.content.data.forEach((item, idx) => {
								if (!item.showPoster) {
									this.content.data[idx].videoContext.stop()
									this.content.data[idx].showPoster = true
								}
							})
							this.stop()
							this.swiperAutoplay = true;
						});
					}
				});
			}
		},
		computed: {
			// videoStyle() {
			// 	const {
			// 		content
			// 	} = this
			// 	return content.poster ? {
			// 		'background-image': `url(${this.$getImageUri(content.poster)})`
			// 	} : {}
			// },
			getVideoUrl() {
				return this.content.data[0].video_type == 1 ? this.$getImageUri(this.content.data[0].url) : this.content
					.data[0].url
			}
		},
		mounted() {
			var cdata = [...this.content.data]
			cdata.forEach((item, idx) => {
				cdata[idx].videoContext = uni.createVideoContext(item.videoId, this)
			})
			this.content.data = [...cdata]
			console.log('content', this.content.data)
		},
		watch: {
			scrollTop() {
				this.dealVideoScrollTop();
			}
		}

	};
</script>

<style lang="scss" scoped>
	.video {
		position: relative;

		// background-repeat: no-repeat;
		// background-size: cover;
		// background-position: 50%;
		// background-image: url(../../../../assets/images/default_video.png);
		// position: relative;
		// &::after {
		//     content: "";
		//     position: absolute;
		//     top: 0;
		//     left: 0;
		//     right: 0;
		//     bottom: 0;
		//     background: url(../../../../assets/images/icon_play.png);
		//     background-position: 50%;
		//     background-repeat: no-repeat;
		//     background-size: 60px;
		//     z-index: 2;
		// }
		&.style1 {
			height: 422rpx;

			.swiper {
				height: 422rpx;
			}
		}

		&.style2 {
			height: 572px;

			.swiper {
				height: 572px;
			}
		}

		&.style3 {
			height: 750px;

			.swiper {
				height: 750px;
			}
		}

		.poster,
		.video-container,
		{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}

	.poster {
		z-index: 999;
	}

	.play-icon {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 100rpx;
		height: 100rpx;
		z-index: 999;
	}
	}
</style>